<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 
     
%>
<!DOCTYPE HTML>
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>引导页列表</title>
	<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="bootstrap-table/dist/bootstrap-table.css">
    <link rel="stylesheet" type="text/css" href="css/xcConfirm.css" />
    
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
    
    <link rel="stylesheet" href="./css/x-admin.css" media="all">

    
</head>
<body>
  <div class="x-nav">
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
         <form class="layui-form x-center" action="" style="width:100%">
			<div class="layui-form-pane" style="margin-top: 15px;margin-left: 0px">
				<div class="layui-form-item">
				<label class="layui-form-label">日期范围</label>
	            <div class="layui-input-inline">
	                <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
	             </div>
	             <div class="layui-input-inline">
	                <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
	             </div>
				<div class="layui-input-inline">
	                <select name="cname" id="status">
	                    <option value="">请选择状态</option>
	                    <option value=" ">全部</option>
	                    <option value="1">启用</option>
	                    <option value="2">禁用</option>
	                </select>
	            </div>
				<div class="layui-input-inline">
	               <input type="text" name="title"  id="title"  placeholder="标题" autocomplete="off" class="layui-input">
	            </div>
				<div class="layui-input-inline" style="width:80px">
	               <button type="button" id="queryBtn" onclick="doQuery();" class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
	           	</div>
			</div>
		</div>
		</form>
		<xblock>
        	<button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
       	 	<button class="layui-btn" onclick="x_admin_show('新增引导页','jsp/advertManager/addOrUpdateguidePage.jsp','600','')"><i class="layui-icon"></i>新增</button>
      </xblock>  
      </div>
	  <div class="container" style="width: 100%">
	        <table id="demo-table">
	        </table>
	  </div>
</body>
	<!-- 加载需要的js -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/common2.js"></script>
	<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="js/jquery-bootstrap-pagination.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
	<script src="js/qunit-1.11.0.js"></script>
	<script src="js/bootstrap-datetimepicker.js"></script>
	<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="js/jquery.md5.js"></script>
	<script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
        
	<script type="text/javascript" charset="utf-8">

	$(function () {
	    initTable();	
	});

	function doQuery(params){
	    $('#demo-table').bootstrapTable('refresh');    //刷新表格
	}

	function initTable(){
	    var url = "advert/getPageList";
	    $('#demo-table').bootstrapTable({
	        method:'GET',
	        dataType:'json',
	        contentType: "application/x-www-form-urlencoded",
	        cache: false,
	        striped: true,                              //是否显示行间隔色
	        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
	        url:url,
	        height: $(window).height() - 110,
	        width:$(window).width(),
	        showColumns:true,
	        pagination:true,
	        queryParams : queryParams,
	        minimumCountColumns:2, 
	        pageNumber:1,                       //初始化加载第一页，默认第一页
	        pageSize:15,                       //每页的记录行数（*）
	        pageList: [15, 25, 50, 100],        //可供选择的每页的行数（*）
	        uniqueId: "id",                     //每一行的唯一标识，一般为主键列
	        exportDataType: 'all',
	        responseHandler: responseHandler,
	        columns: [
	        { field: '', title: '序列', checkbox:true },
	        {
	            field : 'gContent',
	            title : '图片标题',
	            align : 'center',
	            valign : 'middle'
	           
	        },
	        {
                field: 'gImg',
                title: '图片',
                align: 'center',
                formatter: operateFormatterImg 
            },
          {
            field : 'gStatus',
            title : '状态',
            align : 'center',
            valign : 'middle',
            formatter: function (value, row, index) {
            	 console.log(value);
	            	var s="";
	            	if(value==2){
	            		s="禁用";
	            	}else{
	            		s="启用";
	            	}
                  return s;
             }
		    },
		    {
	            field : 'gCreatetime',
	            title : '添加时间',
	            align : 'center',
	            valign : 'middle',
	               formatter : function (value, row, index){
	                return  timeStamp2String(value);
	            }   
	        },
	        {
	            field : 'upId',
	            title : '操作',
	            align : 'center',
	            valign : 'middle',
	            formatter: operateFormatter //自定义方法，添加操作按钮
	        }
	        
	        ]
	    });
	}
	
	function operateFormatter(value, row, index) {//赋予的参数
		console.log(row);
		return [
			'<button class="layui-btn "  onclick="banner_edit(\''+ row.gId + '\')"> <i class="layui-icon">&#xe642;</i>编辑</button>',
			].join('');
} 
	
	//批量删除
	function delAll() {
	    //获取所有被选中的记录
	    var rows = $("#demo-table").bootstrapTable('getSelections');
	    if (rows.length== 0) {
	    	layer.msg('请至少选择一个被删除项!',{icon:2,time:2000});	
	        return;
	    }
	    var ids = '';
	    for (var i = 0; i < rows.length; i++) {
	        ids += rows[i]['gId'] + ",";
	    }
	    ids = ids.substring(0, ids.length - 1);
	    deleteUser(ids);
	}
	
	$(function(){
		$.ajaxSetup( {    
	        //设置ajax请求结束后的执行动作    
	        complete : function(XMLHttpRequest, textStatus) {  
	            // 通过XMLHttpRequest取得响应头，REDIRECT    
	            var redirect = XMLHttpRequest.getResponseHeader("REDIRECT");//若HEADER中含有REDIRECT说明后端想重定向  
	            if (redirect == "REDIRECT") {  
	              //将后端重定向的地址取出来,使用win.location.href去实现重定向的要求  
	              window.location.href= "/hqsm-oa/error.html";    
	            }  
	        }    
	    });  
	})	
	//删除
	function deleteUser(ids) {
		layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
			$.ajax({
	            url: "advert/delete",
	            type: "post",
	            data: {
	                gId: ids
	            },
	            success: function (data) {
	            	if(data.code==200){
	            		layer.msg('已删除!',{icon:3,time:3000});				 		
				 		doQuery();  
			 		}else{
			 			layer.msg('删除失败!',{icon:3,time:3000});			
			 		}
				} 
	        });
        });       
	 }
	// 编辑
     function banner_edit (id) {
    	 x_admin_show('编辑引导页','advert/getDetail?gId=' + id,'600','');
     }
	
    
	
	function operateFormatterImg(value, row, index){			
		return [
				'<img   src='+row.gImg+' layer-src='+row.gImg+' width="50px"  alt="" height="50px"  data-toggle="modal" data-target="#resetPwd"  />'
			].join('');

	}  
	
	function responseHandler(res) { 
		console.log(res);
	    if (res) {
	        return {
	            "rows" : res.data,
	            "total" : res.totalRecord
	        };
	    } else {
	        return {
	            "rows" : [],
	            "total" : 0
	        };
	    }
	}
	
	function queryParams(params) {
	    var param = {    		
	    		startTime : $("#LAY_demorange_s").val(),
		    	endTime : $("#LAY_demorange_e").val(),
		    	status:$("#status").find("option:selected").val(),
		    	title:$("#title").val(),
		    	type:1,
	        limit : this.limit, // 页面大小
	        offset : this.offset, // 页码
	    
	        pageNumber : this.pageNumber,
	        pageSize : this.pageSize
	    }
	  

	    return param;
	} 
	
	//初始化弹出框
	$(function () {
	  	$('[data-toggle="popover"]').popover()
	});
	
	 //时间格式化
   	function timeStamp2String(time){
   	    var datetime = new Date();
   	    datetime.setTime(time);
   	    var year = datetime.getFullYear();
   	    var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
   	    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
   	    var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
   	    var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
   	    var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
   	    return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second
   	}
	 
   	layui.use(['laydate','element','laypage','layer','form'], function(){
    	var form = layui.form(); //只有执行了这一步，部分表单元素才会修饰成功 
        $ = layui.jquery;//jquery
      laydate = layui.laydate;//日期插件
      lement = layui.element();//面包导航
      laypage = layui.laypage;//分页
      layer = layui.layer;//弹出层
      form.render();
    }); 

      //以上模块根据需要引入
      var start = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          end.min = datas; //开始日选好后，重置结束日的最小日期
          end.start = datas //将结束日的初始值设定为开始日
        }
      };
      
      var end = {
        min: '2000-01-01 00:00:00'
        ,max: '2099-06-16 23:59:59'
        ,istoday: false
        ,choose: function(datas){
          start.max = datas; //结束日选好后，重置开始日的最大日期
        }
      };
      
      document.getElementById('LAY_demorange_s').onclick = function(){
        start.elem = this;
        laydate(start);
      }
      document.getElementById('LAY_demorange_e').onclick = function(){
        end.elem = this
        laydate(end);
      }
      
	</script>
</html>